<template>
  <div class="app-container">
    <el-dialog :title="this.title" :visible="visible" @close="cancel" width="1200px"
         :close-on-click-modal="false" :close-on-press-escape="false"
          append-to-body>
          
           
                <el-table
                  :data="tableData"
                  style="width: 100%;margin-bottom: 20px;"
                  row-key="id"
                  border
                  v-loading="loading"
                  default-expand-all
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                  <el-table-column
                    prop="nodeName"
                    label="节点/任务" >
                  </el-table-column>
                  <el-table-column
                    prop="ownerPositionName"
                    width="500px"
                    label="责任岗位"  >
                    <template v-slot="{row, $index: index}">
                      <el-row v-if="row.projectListNodeMemberList && row.projectListNodeMemberList.length">
                        <el-col :span="24">
                          <el-table  :data="row.projectListNodeMemberList" :show-header="false" class="customer-no-border-table">
                            <el-table-column prop="postName" width="100"> </el-table-column>
                            <el-table-column prop="userId" width="150">
                              <template slot-scope="scope">
                                <el-select     v-model="scope.row.userId" :disabled="scope.row.postCode == 'pjm'"   filterable   style="width: 100%;">
                                  <el-option v-for="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId" />
                                </el-select>
                            </template>   
                            </el-table-column>
                            <!-- <el-table-column prop="roundDate" >
                              <template slot-scope="scope">
                                <el-date-picker
                                v-model="scope.row.roundDate"  
                                  type="daterange"
                                  format="yyyy-MM-dd"
                                  value-format="yyyy-MM-dd" 
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期">
                                </el-date-picker>
                              </template>
                            </el-table-column> -->
                          </el-table>  
                        </el-col>
                      </el-row>
                      <el-row v-else>
                        <el-col :span="24">
                          <el-date-picker
                                v-model="row.roundDate"  
                                  type="daterange"
                                  format="yyyy-MM-dd"
                                  value-format="yyyy-MM-dd" 
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期">
                                </el-date-picker>
                        </el-col>
                      </el-row>
                      
                    </template>
                  </el-table-column>
                  
                   
                </el-table>
              
           
          <span slot="footer" class="dialog-footer" > 
            <el-button  @click="cancel">取 消</el-button>
            <el-button   @click="saveDraft()">保存草稿</el-button>
            <el-button type="primary"  @click="onSure()">提 交</el-button>
          </span>
        
    </el-dialog>
     
    
  </div>
</template>

<script>
  import {getSetupDetailDraft,saveSettimeMember,saveSettimeMemberDraft}  from "@/api/projectManage/setup";
  import {getTaskUsers,getUserByPostCodes}  from "@/api/system/user";
  export default {
  name: "ProjectTemplete",
  dicts: ['owner_position'],
  data() {
      return {
        loading:false,
        visible:false,
        userList:[],
        title:'',
        param:{
          id:null
        },
        tableData:[ ],
      }
  },
  created() {
     
  },
  mounted(){
    this.handleUserList();
  },
  methods: {

    /**
     * 保存草稿
     * */
    saveDraft(){
      this.$modal.loading("请稍候...");
       
      this.param.nodes =this.tableData;
      saveSettimeMemberDraft(this.param).then(response => {
        this.$modal.closeLoading();
        this.cancel();
        this.$emit('query');
      }); 
      
       
    },
 

    //表头加红色标点
    addRedStar(h,{column}){
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
    },

    // //获取用户
    // handleGetUser(row){
    //   let param = {codes:row.postCode};
    //   getUserByPostCodes(param).then(response => {
    //     this.userList = response.data;
    //   });
    // },

    
    //提交模板
    onSure(){
       
      this.$modal.loading("请稍候...");
      
     

      //添加校验
      let res = {success:true,message:'校验成功!'};

      for(let i=0;i<this.tableData.length;i++){
        let item = this.tableData[i]; 
        if(item.roundDate == null || item.roundDate.length == 0){
          res.message = item.nodeName + "时间未填写!";
          res.success = false;
          break;
        }
      }

      
      if(res.success){
        this.recursion(this.tableData,res);
      }
 
      if(!res.success){
        this.$confirm(res.message, '提示', {
          confirmButtonText: '确定', 
          type: 'warning'
        }).then(() => {
          this.$modal.closeLoading();
        }).catch(() => {
          this.$modal.closeLoading();   
        });
      }else{
          this.param.nodes =this.tableData;
          saveSettimeMember(this.param).then(response => {
            this.$modal.closeLoading();
            this.cancel();
            this.$emit('query');
          }); 
      }
       
      

    },

    //递归校验
    recursion(list,res){
       
      //添加校验
      for(let i=0;i<list.length;i++){
                let item = list[i];
                 
                if(item.children.length > 0){
                    this.recursion(item.children,res);
                }else{
                  
                  if(item.projectListNodeMemberList == null || item.projectListNodeMemberList.length == 0){
                      res.message = item.nodeName + "责任人未填写!";
                      res.success = false;
                  }else{
                    for(let j=0;j<item.projectListNodeMemberList.length;j++){
                       let obj = item.projectListNodeMemberList[j];
                       
                       if(obj.userId == null ){
                          res.message = item.nodeName + "责任人未填写!";
                          res.success = false;
                          break; 
                       }
                    }
                  }  

                }
            }
    },


    handleUserList(){
      //先获取用户数据
      getTaskUsers().then(response => {
        this.userList = response.data;
      });
    },


    //加载详情
    getDetail(){
      this.loading = true;


      getSetupDetailDraft(this.param.id).then(response => {
            this.tableData = response.data.treeList;
            this.loading = false;
       }); 





 
    },
 
    //弹出
     open(){
        this.visible = true;
     },
 

     //初始化
     init(title,id){
       
      this.title = title;
      this.param.id = id;
      this.getDetail();
     }, 
     // 取消按钮
     cancel() {
        this.visible = false;
        this.tableData = [];  
     }
  }
};
</script>
<style>
  .date_picker{
    width: 150px !important;
  }

  
/* 覆盖鼠标悬停时的背景色 */
.el-table .el-table__body-wrapper tbody tr:hover > td {
  background-color: transparent !important; /* 设置为透明 */
  /* 或者设置为特定的颜色，例如 */
  /* background-color: #fafafa !important; */
}

 /*去掉表格单元格边框*/
 .customer-no-border-table th{
  border:none  !important;
}
.customer-no-border-table td,.customer-no-border-table th.is-leaf {
  border:none  !important;
}
/*表格最外边框*/
.customer-no-border-table .el-table--border, .el-table--group{
  border: none  !important;
}
/*头部边框*/
.customer-no-border-table thead tr th.is-leaf{
  border: 0px solid #EBEEF5;
  border-right: none;
}
.customer-no-border-table thead tr th:nth-last-of-type(2){
border-right: 0px solid #EBEEF5;
}
/*表格最外层边框-底部边框*/
.customer-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{
  width: 0;
}
.customer-no-border-table::before{
width: 0;
}
.customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
width: 0;
}
.customer-no-border-table .el-table__header tr th{
background: #fff;
color: #333333 ;
padding: 3px ;
fontWeight: 550 ;
height: 36px ;
border: 0px;
font-size: 15px;
}

</style>
 
 
